Cards
Stand Alone Card
HTML
<div class="card-standalone mob-card-standalone">
<span>Welcome to registration! Once you complete the registration process, you will have 180 days to schedule and take your Investment Foundations exam. Your expiration date will be indicated on your Order Summary.</span>
</div>
Problem Being Solved
The user needs to understand which content on the page is most important.
When to Use
This pattern is a general purpose card. It can be used to group content on a page to aid comprehension.
When Not to Use
This should not be used if a more specific pattern would work.
Contributing institution Card
HTML
<section class="grid grid-three">
<div class="card-standalone ci-card">
<a href="#">
<div class="ci-image">
<img src="/Content/img/examples/logo.png" alt="" />
</div>
<div class="ci-name">Institute Name</div>
</a>
</div>
...
</section>
Problem Being Solved
Logos and links needs to be displayed in a way that can be easily scanned.
When to Use
It can be used when many logos need to be displayed, and no other component will work.
When Not to Use
It should not be used for image display.
Formatting
Combine institutions in a three column grid.
Newsletter Submission card
HTML
<section>
<div class="card-standalone newsletter-card">
<h3 class="alt">Get featured posts delivered directly to your inbox</h3>
<div class="embedded-form">
<form>
<label class="control-label required" for="unique-email-input-id">Email Address</label>
<div class="form-group">
<input id="unique-email-input-id" type="text" class="form-control" aria-required="true" required="required" />
<button class="secondary">Subscribe</button>
</div>
</form>
</div>
</div>
</section>
Problem Being Solved
There is a CTA that requires a Marketo form to be completed by the user.
When to Use
It should be used for Marketo forms that allow a user to sign up for a newsletter. It generally should be placed last on the page.
When Not to Use
It should not be used for anything except a Marketo form.
Formatting
Note that Marketo forms will be embedded code and the HTML will not match what we have in the component library. We will need to keep a close eye on formatting and styling.
Practical Skills card
Financial Modeling
Build a three-statement financial model showcasing an understanding of business issues, design best practices, and technical skills.
View DetailsAnalyst Skills
Analyze best-in-class practices of successful equity research analysts and apply them to your own practice.
View DetailsPython Programming Fundamentals
Coming Soon!
Develop fluency in writing Python code for finance-based data science projects using Jupyter Notebooks.
Python, Data Science & AI
Coming Soon!
Develop the skills to execute financial data science workflows using Python by applying advanced machine learning techniques from forecasting EPS changes to sentiment analysis.
HTML
<section class="skill-grid">
<div class="skill-card blue">
<header>LEVEL I <span>1</span></header>
<h4>Financial Modeling</h4>
<p>
Build a three-statement financial model showcasing an understanding of
business issues, design best practices, and technical skills.
</p>
<a href="#" class="btn">View Details</a>
</div>
<!-- Card 2 -->
<div class="skill-card green">
<header>LEVEL II <span>2</span></header>
<h4>Analyst Skills</h4>
<p>
Analyze best-in-class practices of successful equity research analysts
and apply them to your own practice.
</p>
<a href="#" class="btn">View Details</a>
</div>
</section>
Problem Being Solved
New look of the Refresher page in the Practical Skills Module.
When to Use
It should be used for Practical Skills Modules section on the Refresher page
When Not to Use
It should not be used for anything except a skill.